<template>
  <el-dialog v-model="updateDialog" title="添加" width="800">
    <el-form :model="form" :rules="rules">
      <el-form-item label="组织名称" :label-width="formLabelWidth" prop="organizationName">
        <el-input v-model="form.organizationName" autocomplete="off" placeholder="请输入组织名称" />
      </el-form-item>
      <el-form-item label="法人姓名" :label-width="formLabelWidth" prop="legalPerson">
        <el-input v-model="form.legalPerson" autocomplete="off" placeholder="请输入法人姓名" />
      </el-form-item>
      <el-form-item label="父级组织" :label-width="formLabelWidth">
        <el-tree-select v-model="form.pid" :data="organizationList" :props="defaultProps" node-key="id" check-strictly
          :render-after-expand="false" style="width: 240px" />
      </el-form-item>
      <el-form-item label="组织地址" :label-width="formLabelWidth" prop="organizationAddress">
        <el-input v-model="form.organizationAddress" autocomplete="off" placeholder="请输入组织地址" />
      </el-form-item>
      <el-form-item label="组织联系电话" :label-width="formLabelWidth">
        <el-input v-model="form.organizationTel" autocomplete="off" placeholder="请输入组织联系电话" />
      </el-form-item>
      <el-form-item label="组织描述" :label-width="formLabelWidth">
        <el-input v-model="form.organizationDesc" autocomplete="off" placeholder="请输入组织描述" />
      </el-form-item>
      <el-form-item label="组织网址" :label-width="formLabelWidth">
        <el-input v-model="form.organizationUrl" autocomplete="off" placeholder="请输入组织网址" />
      </el-form-item>
      <el-form-item label="成立日期" :label-width="formLabelWidth" prop="establishDate">
        <el-date-picker v-model="form.establishDate" value-format="YYYY-MM-DD" type="date" placeholder="请选择成立日期"
          :editable="false" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="reset">取消</el-button>
        <el-button type="primary" @click="onSubmit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineModel, defineEmits, onMounted, computed } from 'vue'
let updateDialog = defineModel("updateDialog")
import axios from '@/axios/index'
import { ElMessage } from 'element-plus'

const formLabelWidth = '140px'
const organizationList = ref([])//组织列表
const defaultProps = {
  label: 'organizationName'
}

const emit = defineEmits(['updateList'])

//添加表单
const form = ref({
  pid: '',
  organizationName: '',
  organizationAddress: '',
  organizationTel: '',
  organizationDesc: '',
  organizationUrl: '',
  establishDate: '',
  legalPerson: '',
  status: 1
})

// 当前日期  
const currentDate = computed(() => {
  return new Date().toISOString().split('T')[0] // ISO格式的日期字符串，不包含时间  
})

//添加表单规则
const rules = ref({
  organizationName: [{ required: true, message: '请输入组织名称', trigger: 'blur' },],
  organizationAddress: [{ required: true, message: '请输入组织地址', trigger: 'blur' }],
  establishDate: [
    {
      required: true,
      message: '请输入成立日期',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value && new Date(value) > new Date(currentDate.value)) {
          callback(new Error('所选日期不能在今日之后'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    }
  ],
  legalPerson: [{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
})


//重置表单
let reset = function () {
  updateDialog.value = false
  form.value = {
    pid: '',
    organizationName: '',
    organizationAddress: '',
    organizationTel: '',
    organizationDesc: '',
    organizationUrl: '',
    establishDate: '',
    legalPerson: '',
  }
}

//添加组织
let onSubmit = function () {
  let data = form.value
  console.log(data.establishDate == null)

  if (data.organizationName == null || data.organizationAddress == null || data.legalPerson == null || data.establishDate == '') {
    ElMessage({
      type: 'error',
      message: '添加失败,请将表格填写完整后提交',
      grouping: true,
    })
    return
  }

  if (new Date(form.value.establishDate) > new Date(currentDate.value)) {
    ElMessage({
      type: 'error',
      message: '添加失败,请选择正确的日期',
      grouping: true,
    })
    return
  }


  if (form.value.pid == '') {
    form.value.pid = 0
  }
  axios.post(`/organization/add`, form.value, { headers: { 'content-type': 'application/json' } }).then(response => {
    if (response.data.code == 200) {
      ElMessage({
        type: 'success',
        message: response.data.message,
      })
      emit('updateList')
      updateDialog.value = false
      return
    }
    ElMessage({
      type: 'error',
      message: response.data.message
    })
  }).catch(error => {
    form.value.pid = ''
  })
}

//获取组织列表
let selectOrganizationList = function () {
  axios.get(`/organization/getList`).then(response => {
    let result = response.data.data
    organizationList.value = result
  })
}

//页面渲染时获取组织列表
onMounted(() => {
  selectOrganizationList()
})
</script>

<style scoped></style>